<template>
  <div>
    <div id="Bottom2"></div>
  </div>
</template>
<script>
import { DualAxes } from '@antv/g2plot';

export default {
  data(){
    return {}
  },
  methods:{
    myAntv(){
      const data = [
        { time: '', value: 470, count: 220 },
        { type: '广州', value: 2200, count: 4500 },
        { type: '东莞', value: 1800, count: 4100 },
        { type: '南宁', value: 800, count: 3800 },
        { type: '佛山', value: 500, count: 4000 },
        { type: '柳州', value: 800, count: 3500 },
        { type: '上海', value: 500, count: 5500 },
        { type: '惠州', value: 400, count: 3000 },
        { type: '海口', value: 100, count: 3800 },
        { type: '其他', value: 900, count: 3000 }
      ];

      const dualAxes = new DualAxes('Bottom2', {
        data: [data, data],
        width: 800,
        height: 150,
        xField: 'type',
        yField: ['value', 'count'],
        yAxis: {
          // 格式化左坐标轴
          value: {
            min: 0,
            label: {
              formatter: (val) => `${val*2.5}元`,
            },
          },
          // 隐藏右坐标轴
          count: false,
        },
        geometryOptions: [
          {
            geometry: 'column',
            color: '#5B8FF9',
            columnWidthRatio: 0.4,
          },
          {
            geometry: 'line',
            smooth: true,
            color: '#5AD8A6',
          },
        ],
        // 更改柱线交互，默认为 [{type: 'active-region'}]
        interactions: [
          {
            type: 'element-highlight',
          },
          {
            type: 'active-region',
          },
        ],
        annotations: {
          value: [
            {
              type: 'text',
              position: ['上海', 'max'],
              content: '-----上海平均工资最高',
            },
          ],
          count: [
            {
              type: 'dataMarker',
              top: true,
              position: ['上海', 400],
              line: {
                length: 96,
              },
            },
          ],
        },
      });
      dualAxes.render();
    }
  },
  mounted(){
    this.myAntv()
  }
}
</script>
<style lang="scss" scoped>

</style>